<template>
  <div class="content content2">
    <div class="header">
      <div class="title" style="display:flex;align-items: center;justify-content: space-between;width: 100%;">
        <span>工单状态</span>
        <div style="display:flex;">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:230px;height:32px;margin-right: 21px;"
            value-format="yyyy-MM-dd"
            :picker-options="{
              disabledDate(time) { // 设置禁用状态，参数为当前日期，要求返回 Boolean
                return time.getTime() > Date.now();//大于当前时间禁用
              }
            }"
            @change="fn"
          />
          <div class="week-month-year">
            <div
              v-for="(item, index) in ['周', '月', '年']"
              :key="index"
              class="item"
              :class="{ active: selDate === item }"
              @click="selDateFn(item)"
            >{{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="collectReport.length" class="charts">
      内容
    </div>
    <div v-else class="empty">
      <img data-v-edc4529c="" src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png">
      <div data-v-edc4529c="" class="tips">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import { getFirstDayOfWeek, parseTime } from '@/utils'
import { collectReport } from '@/api'
export default {
  data() {
    return {
      value: [parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
      selDate: '周',
      collectReport: []
    }
  },
  async created() {
    const res = await this.collectFn(this.value[0], this.value[1])
    this.collectReport = res.data
  },
  methods: {
    // 接口
    async collectFn(start, end) {
      const res = await collectReport(start, end)
      return res
    },
    async  selDateFn(item) {
      this.selDate = item
      if (item === '周') {
        this.value = [parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')]
        const res = await this.collectFn(this.value[0], this.value[1])
        this.collectReport = res.data
      } else if (item === '月') {
        this.value = [parseTime(new Date(), `{y}-${(new Date()).getMonth() + 1}-01`), parseTime(new Date(), '{y}-{m}-{d}')]
        const res = await this.collectFn(this.value[0], this.value[1])
        this.collectReport = res.data
      } else if (item === '年') {
        this.value = [parseTime(getFirstDayOfWeek(new Date()), `${(new Date()).getFullYear()}-01-01`), parseTime(new Date(), '{y}-{m}-{d}')]
        const res = await this.collectFn(this.value[0], this.value[1])
        this.collectReport = res.data
      }
    },
    fn() {
      console.log(this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/count.scss";

.content2 {
  background-color: #fff !important;
  background-image: none !important;
  min-height: 542px;
}

.header {

  display: flex;
  justify-content: space-between;

  .week-month-year {
    display: flex;
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, .37);
    border-radius: 10px;
    align-items: center;
    justify-content: center;

    .item {
      flex: 1;
      text-align: center;
      width: 37px;
      line-height: 25px;
      height: 25px;
      font-size: 14px;
      color: #9ca3b4;
      cursor: pointer;
    }
  }
}

.active {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
  border-radius: 7px;
  font-weight: 600;
  color: #333 !important;
  background: #fff;
}
::v-deep .el-icon-date{
margin-bottom: 5px;
padding: 0 5px;
}
::v-deep .el-range-separator{
line-height: 25px;
font-weight: 100;
color: #606266;
}
::v-deep .el-range-input{
  font-size: 13px;
}
.empty{
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
    width: 123px;
  }
}
</style>
